<style lang="scss" scoped>
$height: 100rpx;

.problem-cell {
	height: $height;
	padding-left: 30rpx;
	display: flex;
	align-items: center;
	background-color: #FFF;
	text-align: left;
}

.problem-cell-title {
	font-size: 32rpx;
	flex: 1;
}

.problem-cell-arrow {
	width: 72rpx;
	height: 100%;
}
</style>

<template>
	<button class="problem-cell" @click="onClick">
		<!-- 标题 -->
		<view class="problem-cell-title ellipsis" v-text="title"></view>
		
		<!-- 箭头 -->
		<view class="problem-cell-arrow arrow-right-grey"></view>
	</button>
</template>

<script>
export default {
	name: "problem-cell",
	
	props: {
		title: {
			type: String,
			required: "",
		}
	},

	methods: {
		onClick() {
			this.$emit("click");
		}
	}

}
</script>